<h3>New Article</h3>
<div ng-controller="ArticleController" class="container-fluid">
   <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">
      <em class="fa fa-exclamation-circle fa-lg fa-fw"></em>
      <span ng-bind-html="alert.msg"></span>
   </alert>
   <div class="row">
      <!-- Article Content-->
      <div class="col-lg-9">
         <div class="panel panel-default">
            <div class="panel-body">
               <form action="">
                  <input type="text" name="article-title" placeholder="Article title..." class="mb-lg form-control input-lg" />
                  <!-- Wysiswyg editor-->
                  <div text-angular="" ng-model="htmlContent" name="wysiswyg-editor" class="btn-group-small"></div>
                  <br/>
                  <p>Notes</p>
                  <textarea cols="6" class="mb-lg form-control"></textarea>
                  <div class="clearfix">
                     <div class="pull-left">
                        <button type="button" class="btn btn-default m-r-10 m-t-10">
                           <em class="fa fa-edit fa-fw"></em>Draft</button>
                        <button type="button" class="btn btn-primary m-t-10">
                           <em class="fa fa-check fa-fw"></em>Save</button>
                     </div>
                     <div class="pull-right">
                        <button type="button" class="btn btn-danger m-r-10 m-t-10">
                           <em class="fa fa-trash fa-fw"></em>Remove</button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
         <p class="lead">List of Comments</p>
         <div class="panel">
            <div class="table-responsive">
               <table class="table table-hover">
                  <thead>
                     <tr>
                        <th>
                           <strong>Comment ID</strong>
                        </th>
                        <th>
                           <strong>Date</strong>
                        </th>
                        <th>
                           <strong>Username</strong>
                        </th>
                        <th>
                           <strong>Comment excerpt</strong>
                        </th>
                        <th class="text-center">
                           <strong>Current status</strong>
                        </th>
                        <th style="width:130px" class="text-right">
                           <strong>Actions</strong>
                        </th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td>123</td>
                        <td>10/05/2015</td>
                        <td><a href="">Jack Jordan</a>
                        </td>
                        <td>Sed quis eros libero, a euismod nisl....</td>
                        <td class="text-center">
                           <span class="label label-success">Approved</span>
                        </td>
                        <td class="text-right">
                           <button type="button" class="btn btn-sm btn-default">
                              <em class="fa fa-pencil"></em>
                           </button>
                           <button type="button" class="btn btn-sm btn-danger">
                              <em class="fa fa-trash"></em>
                           </button>
                           <button type="button" class="btn btn-sm btn-success">
                              <em class="fa fa-check"></em>
                           </button>
                        </td>
                     </tr>
                     <tr>
                        <td>456</td>
                        <td>10/07/2015</td>
                        <td><a href="">Hailey Mckinney</a>
                        </td>
                        <td>Nulla facilisi.</td>
                        <td class="text-center">
                           <span class="label label-success">Approved</span>
                        </td>
                        <td class="text-right">
                           <button type="button" class="btn btn-sm btn-default">
                              <em class="fa fa-pencil"></em>
                           </button>
                           <button type="button" class="btn btn-sm btn-danger">
                              <em class="fa fa-trash"></em>
                           </button>
                           <button type="button" class="btn btn-sm btn-success">
                              <em class="fa fa-check"></em>
                           </button>
                        </td>
                     </tr>
                     <tr>
                        <td>789</td>
                        <td>11/05/2015</td>
                        <td><a href="">Peyton Reyes</a>
                        </td>
                        <td>Quisque enim nisi, semper non pulvinar et, aliquam id lorem...</td>
                        <td class="text-center">
                           <span class="label label-warning">Pending</span>
                        </td>
                        <td class="text-right">
                           <button type="button" class="btn btn-sm btn-default">
                              <em class="fa fa-pencil"></em>
                           </button>
                           <button type="button" class="btn btn-sm btn-danger">
                              <em class="fa fa-trash"></em>
                           </button>
                           <button type="button" class="btn btn-sm btn-success">
                              <em class="fa fa-check"></em>
                           </button>
                        </td>
                     </tr>
                     <tr>
                        <td>999</td>
                        <td>10/06/2015</td>
                        <td><a href="">Darryl Harper</a>
                        </td>
                        <td>Nulla facilisi.</td>
                        <td class="text-center">
                           <span class="label label-danger">Rejected</span>
                        </td>
                        <td class="text-right">
                           <button type="button" class="btn btn-sm btn-default">
                              <em class="fa fa-pencil"></em>
                           </button>
                           <button type="button" disabled="" class="btn btn-sm btn-danger">
                              <em class="fa fa-trash"></em>
                           </button>
                           <button type="button" class="btn btn-sm btn-success">
                              <em class="fa fa-check"></em>
                           </button>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
      <!-- Article sidebar-->
      <div class="col-lg-3">
         <div class="panel panel-default">
            <div class="panel-body">
               <p class="lead">Article Data</p>
               <p>Categories</p>
               <ui-select multiple="" ng-model="postDemo.categories" theme="bootstrap" ng-disabled="disabled" class="mb-lg">
                  <ui-select-match placeholder="Select category...">{{$item}}</ui-select-match>
                  <ui-select-choices repeat="color in availableCategories">{{color}}</ui-select-choices>
               </ui-select>
               <p>Tags</p>
               <ui-select multiple="" ng-model="postDemo.tags" theme="bootstrap" ng-disabled="disabled" class="mb-lg">
                  <ui-select-match placeholder="Select tag...">{{$item}}</ui-select-match>
                  <ui-select-choices repeat="color in availableTags">{{color}}</ui-select-choices>
               </ui-select>
               <p>Reviewers</p>
               <ui-select multiple="" ng-model="postDemo.selectedReviewers" theme="bootstrap" ng-disabled="disabled" class="mb-lg">
                  <ui-select-match placeholder="Select reviewer...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
                  <ui-select-choices repeat="person in reviewers | propsFilter: {name: $select.search, age: $select.search}">
                     <div ng-bind-html="person.name | highlight: $select.search"></div>
                     <small>email: {{person.email}} age:
                        <span ng-bind-html="''+person.age | highlight: $select.search"></span>
                     </small>
                  </ui-select-choices>
               </ui-select>
               <p class="lead">SEO Metadata</p>
               <div class="form-group">
                  <p>Title</p>
                  <input type="text" placeholder="Brief description.." class="form-control" />
               </div>
               <div class="form-group">
                  <p>Description</p>
                  <textarea rows="5" placeholder="Max 255 characters..." class="form-control"></textarea>
               </div>
               <div class="form-group">
                  <p>Keywords</p>
                  <textarea rows="5" placeholder="Max 1000 characters..." class="form-control"></textarea>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>